<title>人员配置</title>
<div class="page animation-fade">
    <div class="page-header page-header-bordered">
        <h1 class="page-title">人员配置分组情况</h1>
        <div class="page-header-actions">
            <button type="button" class="btn btn-icon btn-info collapsed" data-toggle="collapse"
                    data-target="#collapseFilter" aria-expanded="false" aria-controls="collapseFilter">
                <i class="icon fa-filter"></i>
            </button>
        </div>
    </div>
    <div class="dropdown" style="position: absolute;float: left;top:15px;right: 15px">

    </div>
    #parse("/common/loading.html")
    <div class="page-content">
        <div class="collapse" id="collapseFilter" aria-expanded="true">
            <div class="panel">
                <div class="panel-body">
                    <form class="form-horizontal" id="form">
                        <div class="form-group">
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">工作时长</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="dayTime" value="6" required>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">配送时间</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="cost1" value="30" required>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">回收时间</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="cost2" value="60" required>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-1 control-label"></label>
                                <a class="btn btn-success" onclick="lodaRefresh()"><i class="icon fa-refresh"></i> 刷新
                                </a>
                            </div>

                        </div>

                        <div class="form-group" id="hiddens">
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">点位处理</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="isNumber" value="2" required>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">一月天数</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="days" value="30" required>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">参数</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="parameter" value="550" required>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">系数</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="coefficient" value="1.3" required>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">距离1</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="distance1" value="5" required>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">距离2</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="distance2" value="10" required>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">选择方位</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="lnglat" value="1" required>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-bordered">
                <div class="panel-heading">
                    <h7 class="panel-title">配送人员分组</h7>
                    <div class="panel-actions">
                    </div>
                </div>
                <div class="panel-body padding-3" style="width:100%;height: 520px;" id="groupTable1">
                    <table class="table">
                        <thead style="background-color: #d9d9d9;">
                        <tr>
                            <th style="font-size:5px;text-align: center">组号</th>
                            <th colspan="3" style="text-align: center;font-size:5px">各种组合</th>
                            <th style="font-size:5px;text-align: center">料架数量</th>
                            <th style="font-size:5px;text-align: center">配送人员</th>
                            <th style="font-size:5px;text-align: center">回收人员</th>
                        </tr>
                        </thead>
                        <tbody id="groupTable">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-bordered">
                <div class="panel-heading">
                    <h7  class="panel-title">分组导向图</h7>
                    <div class="panel-actions">
                    </div>
                </div>
                <div class="panel-body padding-0 height-520" style="width:100%;height: 520px;">
                    #parse("/lpp/network/city/force.html")
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-bordered">
                <div class="panel-heading">
                    <h7 class="panel-title">各组配送及回收人数对比</h7>
                    <div class="panel-actions">
                    </div>
                </div>
                <div class="panel-body padding-0 height-400" style="width:100%">
                   #parse("/lpp/network/city/bar.html")
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-bordered">
                <div class="panel-heading">
                    <h7 class="panel-title">作业时间及人员配置</h7>
                    <div class="panel-actions">
                        <div class="panel-actions">
                        </div>
                    </div>
                </div>
                <div class="panel-body padding-0 height-400">
                   #parse("/lpp/network/city/line.html")
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/static/public/vendor/matchheight/jquery.matchHeight.min.js"></script>
<script type="text/javascript">
    $(function(){
        document.getElementById("hiddens").style.display="none";
        loadGroupTable();
    });
    function lodaRefresh() {
        $('#form').bootstrapValidator({
            message:'不能为空',
            excluded : [':disabled'],//[':disabled', ':hidden', ':not(:visible)'] //设置隐藏组件可验证
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields:{
                dayTime:{
                    message:'数值无效',
                    validators:{
                        notEmpty:{
                            message:'不能为空'
                        }
                    }
                }
            }
        })
        loadGroupTable();
        loadbar();
        loadforce();
    }
    function loadGroupTable() {
        var param = Form.getParams($("#form"));
        $("#groupTable").empty();
        $.ajax({
            url: "#springUrl('/network/city/groupTable')",
            data: param,
            type: "POST",
            success: function (text) {
                var d = JSON.parse(text);
                if (d.success && d.data) {
                    var body = $("#groupTable");
                    var totalShelf = 0;
                    var totalDistribute = 0;
                    var totalRecovery = 0;
                    for (var i = 0; i < d.data.length; i++) {
                        if(i%2==0){
                            var tr = $("<tr></tr>");
                            tr.append("<td style='font-size: 5px;text-align: center'>" + (i + 1) + "组</td>");
                            tr.append("<td style='font-size: 5px;text-align: center'>" + d.data[i].nodeName1 + "</td>");
                            tr.append("<td style='font-size: 5px;text-align: center'>" + d.data[i].nodeName2 + "</td>");
                            tr.append("<td style='font-size: 5px;text-align: center'>" + d.data[i].nodeName3 + "</td>");
                            tr.append("<td style='font-size: 5px;text-align: center'>" + d.data[i].shelf + "</td>");
                            tr.append("<td style='font-size: 5px;text-align: center'>" + d.data[i].distribute + "</td>");
                            tr.append("<td style='font-size: 5px;text-align: center'>" + d.data[i].recovery + "</td>");
                            body.append(tr);
                            totalShelf += d.data[i].shelf;
                            totalDistribute += d.data[i].distribute;
                            totalRecovery += d.data[i].recovery;
                        }
                        if(i%2!=0){
                            var tr = $("<tr style='background-color: #f9fbfc';></tr>");
                            tr.append("<td style='font-size: 5px;text-align: center'>" + (i + 1) + "组</td>");
                            tr.append("<td style='font-size: 5px;text-align: center'>" + d.data[i].nodeName1 + "</td>");
                            tr.append("<td style='font-size: 5px;text-align: center'>" + d.data[i].nodeName2 + "</td>");
                            tr.append("<td style='font-size: 5px;text-align: center'>" + d.data[i].nodeName3 + "</td>");
                            tr.append("<td style='font-size: 5px;text-align: center'>" + d.data[i].shelf + "</td>");
                            tr.append("<td style='font-size: 5px;text-align: center'>" + d.data[i].distribute + "</td>");
                            tr.append("<td style='font-size: 5px;text-align: center'>" + d.data[i].recovery + "</td>");
                            body.append(tr);
                            totalShelf += d.data[i].shelf;
                            totalDistribute += d.data[i].distribute;
                            totalRecovery += d.data[i].recovery;
                        }
                    }
                    var tr = $("<tr></tr>");
                    tr.append("<td style='font-size: 5px;text-align: center'>合计</td>");
                    tr.append("<td colspan='3' style='font-size: 5px;text-align: center'></td>");
                    tr.append("<td style='font-size: 5px;text-align: center'>" + totalShelf + "</td>");
                    tr.append("<td style='font-size: 5px;text-align: center'>" + totalDistribute + "</td>");
                    tr.append("<td style='font-size: 5px;text-align: center'>" + totalRecovery + "</td>");
                    body.append(tr);
                    document.getElementById("loading").style.display="none";
                }
            },
            error:function (text) {
                var div1="<div type='text' style='padding-top:15%' class=' text-center  '>查询数据异常</div>";
                $("#groupTable1").empty();
                $("#groupTable1").prepend(div1);
                document.getElementById("loading").style.display="none";
            }

        })
    }

</script>